<template name="carInsure">
	<view class="car-info" :style="$s.view_color">
		<view class="place-order-car-insure">
			<view class="insure-header">
				<text class="t1">增值服务</text>
			</view>
			<view class="switch-insure">
				<view class="item">
					<text class="title">车辆租赁费用</text>
					<view class="flex"></view>
					<text class="amount">￥{{info.price || 0}}元/天</text>
				</view>
				<view class="item">
					<text class="title">基本服务费</text>
					<view class="flex"></view>
					<text class="amount">￥{{info.service_fee || 0}}元/天</text>
				</view>
				<view class="item">
					<text class="title">基础手续费</text>
					<view class="flex"></view>
					<text class="amount">￥{{info.base_fee || 0}}元/次</text>
				</view>
				<view class="item">
					<text class="title">租车押金</text>
					<view class="flex"></view>
					<text class="amount">￥{{info.deposit_fee || 0}}元/次</text>
					<view class="switch">
						<u-switch size="20" v-model="deposit_switch" :activeColor="$s.theme" @change="incrementSwtich()"></u-switch>
					</view>
				</view>
				<block v-for="(item,k) in increment_list" :key="k">
					<view class="item">
						<text class="title">{{item.name}}</text>
						<u-icon name="info-circle" @click="showTips(item.name,item.content)"></u-icon>
						<view class="flex"></view>
						<!-- <text class="desc">{{item.title}}</text> -->
						<text class="amount">￥{{item.price}}元{{item.is_day===1?'/天':'/次'}}</text>
						<view class="switch" v-if="!item.is_must">
							<u-switch size="20" v-model="item.switch" :activeColor="$s.theme" :disabled="item.is_must" @change="incrementSwtich()"></u-switch>
						</view>
					</view>
				</block>
			</view>
	<!-- 	    <view class="upgrade-insure">
				<view class="i"></view>
				<text>提示标语提示标语提示标语提示标语提示标语</text>
				<view class="arrow"></view>
			</view>
			<view class="radio-insure">
				<view class="item">
					<view class="hd">
						<text class="title">尊享服务</text>
						<text class="more">详情</text>
						<view class="flex"></view>
						<text class="desc">desc</text>
						<text class="amount">100元</text>
					</view>
					<view class="bd">
						阿卡丽圣诞节福利卡圣诞节福利卡时间段里疯狂静安寺代理费
					</view>
				</view>
			</view> -->
		</view>
		
		<mars-tipsPop :show="tips_pop" :title="tips_title" :content="tips_content" @close="tips_pop=false"></mars-tipsPop>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'carInsure',
		props: {
			info:{
				type:[Object,Array],
				default:{}
			},
			increment:{
				type:[Object,Array],
				default:{}
			},
		},
		data() {
			return {
				tips_pop:false,
				tips_title:'',
				tips_content:'',
				deposit_switch:false,
				increment_list:this.increment,
			};
		},
		watch: {
			increment(e){
				this.increment_list=e
			}
		},
		computed: {
			...mapState({
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
				$config:state => state.$config,
				$s:state => state.$style,
			})
		},
		//首次运行加载
		mounted(){
			this.deposit_switch=this.$config.base.deposit_type=="1"?true:false
		},
		methods: {
			//弹出提示框
			showTips(title,content){
				this.tips_title=title
				this.tips_content=content
				this.tips_pop=true
			},
			//开关增值服务
			incrementSwtich(){
				let increment_data = this.calculateIncrement(this.increment_list,this.deposit_switch);
				this.$emit('insureCall',increment_data)
			},
			// 计算增值服务函数
			calculateIncrement(list,deposit=false){
				let increment_data=[]
				for(var i=0;i<list.length;i++){
					if(list[i].switch===true && !list[i].is_must){
						increment_data.push(list[i].id)
					}
				}
				
				if(deposit===true){
					increment_data.push(-1)
				}
				return increment_data.join(',')
			}
		}
	};
</script>

<style lang="scss">
	.car-info {
	    display: -ms-flexbox;
	    // display: flex;
	    // padding-bottom: 32rpx;
	}
	
	.car-info .thumb {
	    position: relative;
	    display: block;
	    width: 180rpx;
	    height: 128rpx;
	    margin-right: 20rpx;
	    overflow: hidden;
	    border-radius: 10rpx;
	}
	
	.car-info .thumb .img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(60,60,90,.05);
	}
	
	.car-info .thumb .tag {
	    position: absolute;
	    z-index: 2;
	    width: 100%;
	    height: 100%;
	    border: 4rpx solid #ecc571;
	    border-radius: 10rpx;
	    pointer-events: none;
	}
	
	.car-info .thumb .tag .tag-img {
	    position: absolute;
	    top: -4rpx;
	    left: -4rpx;
	    display: block;
	}
	
	.car-info .info {
	    flex: 1;
	    padding-top: 5rpx;
	}
	
	.car-info .info .brand {
	    margin-bottom: 10rpx;
	}
	
	.car-info .info .brand .text {
	    font-weight: 700;
	    font-size: 30rpx;
	}
	
	.car-info .info .brand,.car-info .info .brand .gb-type,.rent-range,.row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.car-info .info .brand .gb-type {
	    -ms-flex-pack: center;
	    justify-content: center;
	    width: 32rpx;
	    height: 32rpx;
	    margin-left: 10rpx;
	    font-size: 20rpx;
	    border: 2rpx solid rgba(60,60,90,.3);
	    border-radius: 8rpx;
	}
	
	.car-info .info .desc {
	    display: block;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	
	/*租车保障*/
	
	.place-order-car-insure {
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    -ms-flex-align: center;
	    align-items: center;
	    margin: 0 32rpx 32rpx;
	    padding: 32rpx;
	    background-color: #fff;
	    background-repeat: no-repeat;
	    background-position: right 0;
	    background-size: 400rpx auto;
	    border-radius: 20rpx;
	}
	
	.place-order-car-insure>.insure-header {
	    display: -ms-flexbox;
	    display: flex;
	    width: 100%;
	    margin-bottom: 32rpx;
	    font-weight: 700;
	    font-size: 30rpx;
	}
	
	.place-order-car-insure>.insure-header .t2 {
	    color: var(--view-theme);
	}
	
	.place-order-car-insure .tips-bar {
	    width: 100%;
	    margin-bottom: 32rpx;
	}
	
	.place-order-car-insure .switch-insure {
	    display: block;
	    width: 100%;
	    margin-bottom: 32rpx;
	    padding: 0 30rpx;
	    border: 4rpx solid rgba(60,60,90,.1);
	    border-radius: 20rpx;
	}
	
	.place-order-car-insure .switch-insure .item {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    padding: 25rpx 0;
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-car-insure .switch-insure .item.first {
	    border-top: none;
	}
	
	.place-order-car-insure .switch-insure .item .amount,.place-order-car-insure .switch-insure .item .title {
	    font-size: 26rpx;
	}
	
	.place-order-car-insure .switch-insure .item .amount .price{
		color: $price-color;
	}
	
	.place-order-car-insure .switch-insure .item .desc {
	    display: block;
	    margin-right: 10rpx;
	    color: $price-color;
	    font-size: 22rpx;
	}
	
	.place-order-car-insure .switch-insure .item .switch {
	    margin-left: 10rpx;
	}
	
	.place-order-car-insure .switch-insure .item .flex {
	    flex: 1;
	}
	
	.place-order-car-insure .switch-insure .item .title {
	    margin-right: 10rpx;
	}
	
	.place-order-car-insure .radio-insure .item .hd,.place-order-car-insure .upgrade-insure {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.place-order-car-insure .upgrade-insure {
	    position: relative;
	    margin: 0 auto;
	    padding: 20rpx;
	    color: var(--view-theme);
	    font-size: 22rpx;
	    line-height: 1;
	    white-space: nowrap;
	    background: #ecfdf9;
	    border-radius: 40rpx;
	}
	
	.place-order-car-insure .upgrade-insure .i {
	    display: block;
	    width: 24rpx;
	    height: 24rpx;
	    margin-right: 10rpx;
	    background: url(../static/images/icon-car-service-shield.png);
	    background-size: 100% 100%;
	}
	
	.place-order-car-insure .upgrade-insure .arrow {
	    position: absolute;
	    bottom: -5rpx;
	    left: 50%;
	    display: block;
	    width: 20rpx;
	    height: 20rpx;
	    margin-left: -10rpx;
	    border-top: 10rpx solid transparent;
	    border-right: 10rpx solid #ecfdf9;
	    border-bottom: 10rpx solid #ecfdf9;
	    border-left: 10rpx solid transparent;
	    transform: rotate(45deg);
	}
	
	.place-order-car-insure .radio-insure {
	    display: block;
	    width: 100%;
	}
	
	.place-order-car-insure .radio-insure .item {
	    display: block;
	    margin-top: 32rpx;
	    border: 4rpx solid rgba(60,60,90,.1);
	    border-radius: 20rpx;
	}
	
	.place-order-car-insure .radio-insure .item .hd {
	    padding: 20rpx 32rpx;
	    background: rgba(60,60,90,.02);
	}
	
	.place-order-car-insure .radio-insure .item .hd .title {
	    display: block;
	    margin-right: 10rpx;
	    font-weight: 700;
	    font-size: 26rpx;
	}
	
	.place-order-car-insure .radio-insure .item .hd .amount {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-car-insure .radio-insure .item .hd .desc {
	    display: block;
	    margin-right: 10rpx;
	    color: $price-color;
	    font-size: 22rpx;
	}
	
	.place-order-car-insure .radio-insure .item .hd .flex {
	    flex: 1;
	}
	
	.place-order-car-insure .radio-insure .item .bd {
		font-size: 22rpx;
		color: #B6B7BA;
	    position: relative;
	    display: block;
	    padding: 10rpx 32rpx 20rpx;
	}
	
	.place-order-car-insure .radio-insure .item.active {
	    border-color: var(--view-theme);
	}
	
	.place-order-car-insure .radio-insure .item.active .hd {
	    background: rgba(0,207,151,.03);
	}
	
</style>
